<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
<!--  <h1 >{{msg}}</h1>-->
<!--  <h1 v-once>{{msg}}</h1>-->
<!--
innerText
innerHTML
-->
<!--  <div v-html="divHtml"></div>-->
<!--  <h1 v-bind:id="h1Id">{{msg}}</h1>-->
<!--  <h1 :id="h1Id">{{msg}}</h1>-->
<!--  <button disabled>按钮</button>-->
<!--  <button :disabled="isEble">按钮</button>-->
<!--  {{ number + 1 }}-->
<!--  <hr>-->
<!--  {{ isEble ? 'YES' : 'NO' }}-->
<!--  <hr>-->
<!--  {{ msg.split('').reverse().join('') }}-->

<!--  <h1 v-show="awesome">Vue is awesome!</h1>-->
<!--  <h1 v-if="awesome">Vue is awesome!</h1>-->
<!--  <h1 v-else>Oh no 😢</h1>-->

<!-- template最终不会渲染 -->
  <!--
  <template v-if="isEble">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>
  <h1 v-else>Oh no 😢</h1>
  -->

  <!--
  <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>
  -->

  <!--
  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username" key="username">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address" key="address">
  </template>
  -->

<!--
[1, 2, 3, 4, 5]
-->

  <!--<div v-for="">
    <div v-if=""></div>
  </div>-->
  <ul>
    <li v-for="(item, index) of items" :key="index">
      {{index + 1}}. {{ item.message }}
    </li>
  </ul>
  <h3 v-for="item in object1">
    {{item}}
  </h3>
  <div>
    <span v-for="n in 100">{{ n }} </span>
  </div>
</div>

<script src="vue.js"></script>
<script>
  // Object.keys()

  let app = new Vue({
    el: '#app',
    data: {
      object1: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      },
      items: [
        { message: 'Foo' },
        { message: 'zhang' },
        { message: 'li' },
        { message: 'wang' },
        { message: 'Bar' }
      ],
      loginType: 'username',
      type: '',
      awesome: true,
      number: 100,
      msg: 'hello vue',
      divHtml: '<h1>hello html</h1>',
      h1Id: 'tit',
      isEble: true
      // `${}`
    },
    methods: {}
  })

  /*
  * v-once
  * v-html=""
  * v-bind:attr="" === :attr=""
  * v-for=""
  * v-if=""
  * v-on:click="" === @click=""
  *
  * */
</script>
</body>
</html>